<template>
	<view class="content">
		<view class="">
			<view class="searchInput">
				<view class="input">
					<image :src="$imgs.indexInput" mode=""></image>
					<input type="text" confirm-type="done" placeholder="请输入关键字" placeholder-class="pClass"
						v-model="fData.keyword" @confirm="confirmBtn" />
				</view>
			</view>
			<!-- 默认显示 -->
			<view class="recommend" v-if="false">
				<view class="title">
					<text class="t1">热门搜索</text>
				</view>
				<view class="tagList tn-flex tn-flex-wrap">
					<text class="tag" v-for="i in 5">原神</text>
				</view>
				<view class="title m-top tn-flex tn-flex-row-between tn-flex-col-center">
					<text class="t1">历史记录</text>
					<image src="/static/index/del.png" mode=""></image>
				</view>
				<view class="tagList tn-flex tn-flex-wrap">
					<text class="tag" v-for="i in 5">原神</text>
				</view>
			</view>
			<!-- 搜索显示 -->
			<view class="search-view tn-flex tn-flex-direction-column" :style="{height:h+'px'}" v-if="playList.length != 0">
				<view class="filtrate tn-flex tn-flex-row-between">
					<view class="f-tab tn-flex tn-flex-col-center">
						<text class="label" @click="fData.sortShow = !fData.sortShow">{{fData.sortName}}</text>
						<image src="/static/index/sj1.png" mode="" v-if="!fData.sortShow"></image>
						<image src="/static/index/sj2.png" mode="" v-else></image>
						<!-- 筛选弹窗 -->
						<view v-show="fData.sortShow"
							class="filtrate-pop tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-around">
							<block v-for="(item,index) in sortList" :key="index">
								<text :class="[{'text-pitch':fData.sort == item.value}]"
									@click="conditionClick(item,1)">{{item.name}}</text>
							</block>
						</view>
					</view>
					<view class="f-tab tn-flex tn-flex-col-center">
						<text class="label" @click="fData.sexShow = !fData.sexShow">{{fData.sexName}}</text>
						<image src="/static/index/sj1.png" mode="" v-if="!fData.sexShow"></image>
						<image src="/static/index/sj2.png" mode="" v-else></image>
						<!-- 筛选弹窗 -->
						<view v-show="fData.sexShow"
							class="filtrate-pop tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-around">
							<block v-for="(item,index) in sexList" :key="index">
								<text :class="[{'text-pitch':fData.sex == item.value}]"
									@click="conditionClick(item,2)">{{item.name}}</text>
							</block>
						</view>
					</view>
					<view class="f-tab tn-flex tn-flex-col-center">
						<text class="label" @click="fData.priceShow = !fData.priceShow">{{fData.priceName}}</text>
						<image src="/static/index/sj1.png" mode="" v-if="!fData.priceShow"></image>
						<image src="/static/index/sj2.png" mode="" v-else></image>
						<!-- 筛选弹窗 -->
						<view v-show="fData.priceShow"
							class="filtrate-pop tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-around">
							<block v-for="(item,index) in priceList" :key="index">
								<text :class="[{'text-pitch':fData.price_sort == item.value}]"
									@click="conditionClick(item,3)">{{item.name}}</text>
							</block>
						</view>
					</view>
				</view>
				<view class="list">
					<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="scrolltolower">
							<manito-list :list="playList"></manito-list>
							<w-load-more ref="wLoadMore"></w-load-more>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: 0,
				show: false,
				fData: {
					sortName: '智能排序',
					sort: 1,
					sortShow: false,
					sexName: '不限性别',
					sex: 0,
					sexShow: false,
					priceName: '不限价格',
					price_sort: '',
					priceShow: false,
					lng: uni.getStorageSync('lng'),
					lat: uni.getStorageSync('lat'),
					game_id: '',
					page: 1,
					keyword:''
				},
				sortList: [{
						name: '智能排序',
						value: '1'
					},
					{
						name: '距离优先',
						value: '2'
					},
					{
						name: '人气优先',
						value: '3'
					},
					// {
					// 	name: '同城优先',
					// 	value: '4'
					// }
				],
				sexList: [{
						name: '不限性别',
						value: '0'
					},
					{
						name: '限男生',
						value: '1'
					},
					{
						name: '限女生',
						value: '2'
					},
				],
				priceList: [{
						name: '不限价格',
						value: ''
					},
					{
						name: '从高到低',
						value: 'desc'
					},
					{
						name: '从低到高',
						value: 'asc'
					},
				],
				fShowList: [false, false, false],
				playList: []
			};
		},
		onLoad() {
			this.h = this.vuex_window_height - this.vuex_custom_bar_height - uni.upx2px(128)
		},
		methods: {
			async playIndex(loading) {
				try {
					let result = await this.$request({
						loading,
						method: 'post',
						url: '/api/play_index/index',
						data: {
							...this.fData
						}
					})
					let data = result.data.data
					if (this.fData.page == 1) {
						this.playList = data
						if(data.length == 0){
							this.msg('暂无数据')
						}
					} else {
						this.$refs['wLoadMore'].setNomore()
						this.playList = this.playList.concat(data)
						if (data.length == 0) {
							this.fData.page--
						}
					}
				} catch (e) {
					this.msg('接口出现错误')
					//TODO handle the exception
				}
			},


			confirmBtn(e) {
				this.fData.page = 1
				this.fData.price_sort = ''
				this.fData.priceName = '不限价格'
				this.fData.sort = 1
				this.fData.sortName = '智能排序'
				this.fData.sex = 0
				this.fData.sexName = '不限性别'

				this.playIndex(1)
			},
			scrolltolower(e) {
				console.log(e)
			},
			conditionClick(item, type) {
				if (type == 1) {
					this.fData.sort = item.value
					this.fData.sortName = item.name
					this.fData.sortShow = false
				} else if (type == 2) {
					this.fData.sex = item.value
					this.fData.sexName = item.name
					this.fData.sexShow = false
				} else if (type == 3) {
					this.fData.price_sort = item.value
					this.fData.priceName = item.name
					this.fData.priceShow = false
				}
				this.fData.page = 1
				this.playIndex(1)
			}
		}

	}
</script>
<style lang="scss" scoped>
uni-page-body{
  background: #fff;
}
	.content {
		padding: 0 30rpx;
    background: #fff;
		.searchInput {
			height: 128rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.input {
				width: 690rpx;
				height: 72rpx;
				background: #efefef;
				border-radius: 12rpx;
				padding: 0 24rpx;
				display: flex;
				align-items: center;

				image {
					width: 24rpx;
					height: 26rpx;
					margin-right: 16rpx;
				}

				input {
					color: $uni-text-color;
				}
			}

			.pClass {
				color: $uni-input-placeholder-color;
				font-size: 28rpx;
			}
		}

		.recommend {

			.m-top {
				margin-top: 40rpx;
			}

			.title {
				.t1 {
					font-size: 26rpx;
					font-weight: 400;
					color: #FFB2F9;
				}

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.tagList {
				.tag {
					display: inline-block;
					height: 72rpx;
					background: #261D33;
					border-radius: 60rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFB2F9;
					line-height: 72rpx;
					padding: 0 30rpx;
					margin-right: 20rpx;
					margin-top: 32rpx;
				}

			}
		}

		.search-view {
			.filtrate {
				margin-bottom: 32rpx;

				.f-tab {
					position: relative;

					.label {
						display: inline-block;
						width: 120rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #333333ad;
						text-align: center;
					}

					image {
						width: 14rpx;
						height: 7rpx;
					}

					.filtrate-pop {
						position: absolute;
						top: 28px;
						left: 0rpx;
						width: 148rpx;
						height: 210rpx;
            background: #ebebeb;
            border-radius: 4px;
						z-index: 1;

						text {
							font-size: 24rpx;
							font-weight: 500;
							color: #333333;
						}

						.text-pitch {
              font-weight: bold;
							//color: #D082D4;
						}
					}

					.filtrate-pop::before {
						content: "";
						width: 0px;
						height: 0px;
						border-left: 12rpx solid transparent;
						border-right: 12rpx solid transparent;
						border-bottom: 20rpx solid #ebebeb;
						position: absolute;
						top: -20rpx;
						left: 50%;
						transform: translateX(-50%);

					}
				}
			}

			.list {
				flex: 1;
				overflow: hidden;

				.scroll-view {
					height: 100%;
				}
			}
		}

	}
</style>
